<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/navBar.css">
  <link rel="stylesheet" href="css/image-item.css">
  <link rel="stylesheet" href="css/sticky.css">
  <title>知乎首页</title>
</head>

<body>
  <!-- 最上部导航栏 -->
  <div class="navbar">
    <div class="refresh">
      <a href="#">
        <img src="img/logo.png" alt="">
      </a>
    </div>
    <div class="classify">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">会员</a></li>
        <li><a href="#">发现</a></li>
        <li><a href="#">等你来答</a></li>
      </ul>
    </div>
    <div class="search">
      <label for="searchId">
        <input type="text" name="" id="searchId" value="有什么">
        <button><img src="img/search.svg" alt=""></button>
      </label>
      <button>提问</button>
    </div>

    <div class="nav-icon">
      <div>
        <a href="#"><img src="img/bell.svg" alt=""></a>
        <span>
          <span>20</span>
        </span>
      </div>
      <div>
        <a href="#"><img src="img/message.svg" alt=""></a>
        <span>
          <span>20</span>
        </span>
      </div>
      <div class="profile">
        <img src="img/profileImg.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="body">
    <!-- 第二个导航栏 -->
    <nav class="nav">
      <a href="#">关注</a>
      <a href="#">推荐</a>
      <a href="#">热榜</a>
      <a href="#">视频</a>
    </nav>

    <!-- 右侧栏 -->
    <div class="sticky">
      <div class="action">
        <a href="#">
          <img src="img/question-list .svg" alt="">
          <div>回答问题</div>
        </a>
        <div>
          <img src="img/video.svg" alt="">
          <div>发视频</div>
        </div>
        <a href="#">
          <img src="img/article.svg" alt="">
          <div>写文章</div>
        </a>
        <div>
          <img src="img/mind.svg" alt="">
          <div>写想法</div>
        </div>
      </div>
      <a href="#" class="later-read">
        <div>
          <div>稍后答</div>
          <div class="question-number">1</div>
        </div>
      </a><a href="#" class="draft-box">
        <div>
          <div>草稿箱</div>
        </div>
      </a>
      <img src="img/sticky-img.png" alt="">
      <a>
        <div class="create-center">
          <img src="img/profile-image.svg" alt="" class="profile-image">
          <div>创作中心
            <span>Lv 1</span>
          </div>
          <img src="img/arrow-right.svg" alt="" class="arrow-right">
          <div class="CreatorEntrance-seen"></div>
        </div>
        <div class="situaction">
          <div class="yesterday-read">
            <div>昨日阅读（播放）数</div>
            <div>0</div>
            <div>
              <div>较前日</div>
              <div>--</div>
            </div>
          </div>
          <div class="agree-number">
            <div>昨日赞同数</div>
            <div>0</div>
            <div>
              <div>较前日</div>
              <div>--</div>
            </div>
          </div>
        </div>
        <div class="protect">
          <a href="">瓦力保镖为你的创作提供持续保护<img src="img/protect.svg" alt=""></a>
        </div>
      </a>
      <div class="GlobalSideBar-category">
        <ul class="GlobalSideBar-categoryList">
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/flash.svg" alt=""><span>Live</span></a></li>
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/book.svg" alt=""><span>书店</span></a></li>
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/table.svg" alt=""><span>圆桌</span></a></li>
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/pen.svg" alt=""><span>专栏</span></a></li>
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/pay.svg" alt=""><span>付费咨询</span></a></li>
          <li class="GlobalSideBar-categoryItem"><a href="#"><img src="img/sciense.svg" alt=""><span>百科</span></a></li>
        </ul>
      </div>
      <div class="card" id="card">
        <ul class="sideBarList">
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-collect.svg" alt=""><span>我的收藏</span><span
                class="number-collect">0</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-question.svg" alt=""><span>我关注的问题</span><span
                class="number-question">1</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-invite.svg" alt=""><span>我的邀请</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-balance.svg" alt=""><span>我的余额</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-message.svg" alt=""><span>站务中心</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-help.svg" alt=""><span>帮助中心</span></a></li>
          <li class="sideBarListItem"><a href="#"><img src="img/sticky-copyright.svg" alt=""><span>版权服务中心</span></a>
          </li>
        </ul>
      </div>
      <footer class="footer" id="footer">
        <a class="footer-item" href="">刘看山</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">知乎指南</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">知乎协议</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">知乎隐私保护指引</a>
        <br>
        <a href="" class="footer-item">应用</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">工作</a>
        <span class="footer-dot">·</span>
        <button type="button" class="Button OrgCreateButton">申请开通知乎机构号</button>
        <br>
        <a href="" class="footer-item">侵权举报</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">网上有害信息举报专区</a>
        <br>
        <a href="" class="footer-item">京 ICP 证 110745 号</a>
        <br>
        <a href="" class="footer-item">京 ICP 备 13052560 号 - 1</a>
        <br>
        <a href="" class="footer-item">
          <img src="img/sticky-police.svg" alt="">"京公网安备 11010802020088"
        </a>
        <br>
        <span class="footer-item">
          "互联网药品信息服务资格证书"
          <br>
          "(京) - 非经营性 - 2017 - 0067"
        </span>
        <span class="footer-item">违法和不良信息举报：010-82716601</span>
        <br>
        <a href="" class="footer-item">儿童色情举报专区</a>
        <br>
        <a href="" class="footer-item">信息安全漏洞反馈专区</a>
        <br>
        <a href="" class="footer-item">证照中心</a>
        <span class="footer-dot">·</span>
        <a href="" class="footer-item">Investor Relations</a>
        <br>
        <a href="" class="footer-item">联系我们</a>
        <span>
          "C"
          "2021"
          "知乎"
        </span>
      </footer>
    </div>

    <!-- 左侧内容 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第二个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第三个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 左侧第四个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第五个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第六个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第七个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第八个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第九个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧第十个 -->
    <div class="surface">
      <div class="image-item">
        <h2><a href="#">有哪部电影让你受益良多？</a></h2>
        <div class="item-body">
          <div class="cover-image">
            <img src="img/image-item.png" alt="">
          </div>
          <div class="description">
            李继陈：片段更新至超过100部，这段台词出自大卫芬奇导演的《返老还童》，也被译为《本杰明巴顿奇事》。这部电影我看了四遍，每一遍都有不同的感触。有时看到爱情，有时看到成长，有时看到生命，有时看到死亡。电影改变自菲茨杰拉德的...
            <button>阅读全文<img src="img/pull-down.svg"></button>
          </div>
          <div class="assess">
            <button class="agree">赞同1930
              <span>
                <img src="img/agree.svg" alt="">
              </span>
            </button>
            <button class="disagree">
              <span>
                <img src="img/disagree.svg" alt="">
              </span>
            </button>
            <button class="comment">736条评论
              <span>
                <img src="img/assess-message.svg" alt="">
              </span>
            </button>
            <button class="share">分享
              <span>
                <img src="img/share.svg" alt="">
              </span>
            </button>
            <button class="collect">收藏
              <span>
                <img src="img/collect.svg" alt="">
              </span>
            </button>
            <button class="like">喜欢
              <span>
                <img src="img/like.svg" alt="">
              </span>
            </button>
            <button class="omit">
              <span>
                <img src="img/omit.svg" alt="">
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.onscroll = function () {
      // 滑动到某个位置就固定的元素节点
      var footer = document.getElementById('footer');
      var footerTop = footer.getBoundingClientRect().top;
      console.log(footerTop)
      if (footerTop > 49.76) {
              // 需要固定的元素节点上的节点
        footer.style.position = 'static';
      } else {
        footer.style.position = 'fixed';
        footer.style.top = '20px';
      }

    }
  </script>
</body>

</html>